<template>
    <div class="login-container">
        <transition name="login">
            <div class="login" v-show="show">
                <div class="l"></div>
                <div class="r">
                    <el-tabs stretch v-model="type">
                        <el-tab-pane label="短信登录" name="sms">
                            <el-input
                                placeholder="手机号"
                                v-model="formData.phone"
                            />
                            <el-input
                                placeholder="验证码"
                                v-model="formData.code"
                            >
                                <el-button
                                    slot="append"
                                    :disabled="!formData.phone || sendTime < 60"
                                    @click="onSend"
                                    >{{ sendLadel }}
                                </el-button>
                            </el-input>
                            <!-- click是个自定义事件，不是原生点击事件 -->
                            <el-button
                                :loading="loading"
                                type="primary"
                                @click="login"
                                >登录</el-button
                            >
                        </el-tab-pane>
                        <el-tab-pane label="密码登录" name="password">
                            <el-input
                                placeholder="用户名"
                                v-model="formData.username"
                            />
                            <el-input
                                type="password"
                                placeholder="密码"
                                v-model="formData.password"
                            >
                            </el-input>
                            <el-button
                                :loading="loading"
                                type="primary"
                                @click="login"
                                >登录</el-button
                            >
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </div>
        </transition>
    </div>
</template>

<script>
// import axios from "axios";  因为挂载到main.js原型上了 就不用再导入了
export default {
    data() {
        return {
            type: "sms", //手机号短信登录sms,用户名密码登陆password
            formData: {
                phone: "",
                code: "",
                username: "",
                password: ""
            },
            sendTime: 60,
            timeId: null,
            show: false,
            loading: false //正在请求，限制登录点击一次
        };
    },
    computed: {
        sendLadel() {
            if (this.sendTime < 60) {
                return this.sendTime + "秒后重发";
            } else {
                return "发送验证码";
            }
        }
    },
    methods: {
        onSend() {
            //先校验手机号，通过校验后调用发送验证码接口
            if (!/^1\d{10}$/.test(this.formData.phone)) {
                return this.$message.error("手机号格式错误");
            }
            this.getCode();

            this.timeId = setInterval(() => {
                this.sendTime--;
                if (this.sendTime === 0) {
                    clearInterval(this.timeId);
                    this.sendTime = 60;
                }
            }, 1000);
        },
        getCode() {
            //发送验证码的接口
            this.axios.post("/code", {
                phone: this.formData.phone
            });
        },
        login() {
            if (this.loading) return;
            this.loading = true;
            const params = {
                type: this.type
            };
            if (this.type === "sms") {
                params.phone = this.formData.phone;
                params.code = this.formData.code;
            } else {
                params.username = this.formData.username;
                params.password = this.formData.password;
            }

            this.axios
                .post("/login", params)
                .then(res => {
                    console.log(res);
                    this.show = false;
                    setTimeout(() => {
                        this.$router.push("/main");
                    }, 1000);
                })
                .finally(() => {
                    //如论请求成功与否，都会走finally这句话
                    this.loading = false;
                });

            // const xhr = new XMLHttpRequest();
            // xhr.open("POST", "/equipment/login");
            // xhr.onreadystatechange = () => {
            //     if (xhr.readyState === 4 && xhr.status === 200) {
            //         // console.log(xhr.responseText);
            //         const data = JSON.parse(xhr.responseText);
            //         if (data.code === 0) {
            //             this.$router.push("/main");
            //         } else {
            //             this.$message.error(data.msg);
            //         }
            //     }
            // };
            // xhr.send(
            //     JSON.stringify({
            //         code: "654321",
            //         phone: "13800138001",
            //         type: "sms"
            //     })
            // );
        }
    },
    mounted() {
        // setTimeout(() => {
        //     const el = document.querySelector(".login");
        //     el.className = "login show";
        // }, 1000);
        this.show = true;
    }
};
</script>

<style lang="sass" scoped>
.login-container
    display: flex
    justify-content: center
    align-items: center
    position: fixed
    top: 0
    left: 0
    right: 0
    bottom: 0
    background: url(~@/assets/img/login-bg.png) no-repeat
    background-size: cover
    .login-enter //显示前的状态
        opacity: 0
        transform: translateY(10%) scale(.5)
    //在显示的整个过程都有的class，定义过渡
    .login-enter-active
        transition: 1.5s
    //下面的两个跟标签本身一样，离开或隐藏 可以不适用
    // .v-enter-to
    // .v-leave
        //离开过渡
    .login-leave-active
        transition: 1.5s
        //离开之后的样式
    .login-leave-to
        opacity: 0
        transform: translateY(-20%) scale(.5)
    .login
        display: flex
        width: 800px
        height: 400px
        border-radius: 10px
        background: #fff
        overflow: hidden
        // opacity: 0
        // transition: 1.5s
        // transform: translateY(10%) scale(.8)
        // &.show
        //     opacity: 1
        //     transform: translateY(0) scale(1)
    .l
        flex: 0 0 490px
        background: url(~@/assets/img/login-left.png) no-repeat
        background-size: cover
    .r
        padding: 60px 40px 0
        flex: 1
        .el-input
            margin-bottom: 15px
        .el-tab-pane > .el-input + .el-button
            width: 100%
</style>
